<template>
  <div class="new-order">
     <nav-bar>
          <template #left>
              <van-icon name="arrow-left" @click="backHome" />
          </template>
        <template #center> 
            生成订单
          </template>
     </nav-bar> 
    <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
    <Scroll  class="content" :observe-dom="true" :observe-image="true" :pullUpLoad="true" ref="scroll">
        <div class="order_con">
          <div class="con_item" v-for="item in store.state.orderList" :key="item.id">
                       <van-card
                        :num="item.num"
                        :price="item.price"
                        :title="item.title"
                        :thumb="item.pic"
                        />
          </div>
     </div>
    </Scroll>
    <div class="pay_btn">
              <div class="price">
                  <div class="text_price">
                      商品金额
                  </div>
                  <div class="num_price">
                     ￥{{allPrice}}
                  </div>
              </div>
              <van-button type="primary" class="order_good" @click="handleOrder" color="#ffc400">生成订单</van-button>
        </div>
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import Scroll from '../components/common/Scroll.vue'


import { reactive, toRefs } from '@vue/reactivity'
import {Dialog} from 'vant'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'
import { computed } from '@vue/runtime-core'
export default {
  name:'CreateOrder',
  components:{
      NavBar,
      Scroll
  },
  setup(){
      const store = useStore();
      const router = useRouter();
      const route = useRoute();
      const data = reactive({
          name:'张三',
          tel:'18191582355'
      })
    //   路由跳转
    const backHome=()=>{
        router.back();
    }
    //   生成订单
    const handleOrder=()=>{
        Dialog.alert({
        title: '提示',
        message: '恭喜,您的订单已完成',
        }).then(() => {
           let newList = store.state.cartList.filter((item)=>{
               return !route.query.list.includes(item.id + "")
           })
           store.commit('DELETE_GOOD',newList);
           store.commit('UPDATE_ORDER');
           router.push('/order')
        });
    }
    // 商品金额
    const allPrice = computed(()=>{
         return store.state.orderList.reduce((pre,cur)=>{
            return pre + cur.num * cur.price;
         },0)
    })
    // 地址管理
    const onEdit = ()=>{
          router.push('/address')
    }
      
      return {
          ...toRefs(data),
          store,
          handleOrder,
          backHome,
          onEdit,
          allPrice
      }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-card__title{
    font-size: 14px;
}
.new-order{
    position: relative;
    height: 100vh;
    background-color: #f4f4f4;
  .content{
     position: absolute;
     left: 0;
     right: 0;
     top: 117px;
     bottom: 80px;
     overflow: hidden;
     .con_item{
         margin-bottom: 10px;
     }
 }
.pay_btn{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     height: 80px;
     background-color: #fff;
     padding: 0 20px;
     border-top: 1px solid #eee;
    .price{
      display: flex;
      justify-content: space-between;
      .text_price{
          font-weight: 600;
          font-size: 14px;
      }
      .num_price{
          color: red;
      }
    }
}
    }
</style>